<template>
<page title="宿舍资源状态图" has-back>
  <div class="container">
    <el-row>
      <el-col :span="16">
        <el-calendar v-model="date">
          <template #dateCell="{data}">
            <div class="inner-box" :class="data.isSelected ? 'is-selected' : ''" @click="changeDate(data.day)">
              <div class="center">
                {{ parseInt(data.day.split('-')[2],10) }}
              </div>
            </div>
          </template>
        </el-calendar>
      </el-col>
      <el-col :span="8">.
        <el-scrollbar>
          <el-form>
            <el-form-item v-for="type in roomType" :label="type.name" :key="type.id">
              <div style="margin-top: 5px">
                <el-tree :data="treeData(type.id)" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</page>
</template>

<script>
import Page from "@/components/Page";
import moment from "moment";
import axios from "axios";
export default {
  name: "DormitoryResources",
  components: {Page},
  data(){
    return{
      date:moment(new Date()).format("YYYY-MM-DD"),
      // rooms:[{
      //   type:'单人间',
      //   total:36,
      //   details:[{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   }]
      // },{
      //   type:'双人间',
      //   total:36,
      //   details:[{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   }]
      // },{
      //   type:'4人间',
      //   total:36,
      //   details:[{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   },{
      //     build:'新培训楼',
      //     number:12
      //   }]
      // },{
      // type:'套房',
      //     total:0,
      //     details:[]
      // }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dorm:[],
      roomType:[]
    }
  },
  computed:{
    // roomData(){
    //   let tData = [];
    //   for(let i = 0; i < this.rooms.length;i++){
    //     tData.push({type:this.rooms[i].type, data:[{label:'剩余'+this.rooms[i].total+'间',children: []}]});
    //     for(let j = 0;j < this.rooms[i].details.length;j++){
    //       tData[i].data[0].children.push({label:this.rooms[i].details[j].build+this.rooms[i].details[j].number+'间'});
    //     }
    //   }
    //   return tData;
    // }
  },
  methods:{
    findDormitoryRestInDate(date){
      return  axios.get(this.$host+"/dormitory/rest",{
        params:{
          date:date
        }
      }).then((response)=>{
        if(response.data.code === 0){
          this.dorm = response.data.data;
          console.log(this.dorm);
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllRoomType(){
      return axios.get(this.$host+"/build/roomtype").then(response=>{
        if(response.data.code === 0){
          this.roomType = response.data.data;
        }
      })
    },
    handleNodeClick(){

    },
    changeDate(date){
      this.findDormitoryRestInDate(date);
      console.log(date)
    },
    treeData(roomTypeId){
      let dorm = this.dorm.filter((value)=>{
        return value.roomType.id === roomTypeId;
      })
      let total = dorm.reduce((total,value)=>{
        return total+value.amount;
      },0)
      let root = [{label:'剩余'+total+'间',children: []}];
      dorm.forEach((value)=>{
        root[0].children.push({label:value.build.name+value.amount+"间"})
      })
      return root;
    }
  },
  created() {
    this.findAllRoomType().then(()=>{this.changeDate(this.date)});
  }
}
</script>

<style scoped>
.container{
  padding-left: 20px;
}
.inner-box{
  width: 100%;
  height: 100%;
}
.has-project{
  background-color:rgb(242, 16, 18);
  color: white;
}
.is-selected {
  background-color: rgb(9, 134, 254);
  color: white;
}
</style>